<template>
  <div class='page-container'>
    <div class="avatar-wrap">
      <img class="avatar" src="//gw.alicdn.com/imgextra/i2/O1CN01ocfLqO2511L0r9hE7_!!6000000007465-2-tps-90-90.png" alt="">
      <div class="avatar" v-for="(item) in avatarList" :key="item.id" :style="{ transform: `translate3d(-${item.tag}vw, 0,0)`, opacity: item.opacity}">
        <img class="avatar-img" :src="item.img" alt="">
      </div>
    </div>
    <van-button type="primary" @click="start">开始</van-button>
    <van-button type="danger">停止</van-button>
  </div>
</template>
<script>
import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

export default {
  name: 'AnimateDemo2',
  components: {},
  computed: {
  },
  data() {
    return {
      avatarList: [
        { img: 'https://img1.baidu.com/it/u=3343182881,800006273&fm=253&fmt=auto&app=138&f=JPEG?w=240&h=240', tag: 0, opacity: 0, id: '01',style: {transform: 'translate3d(0, 0,0)', opacity: 0}},
        { img: 'https://img0.baidu.com/it/u=3338448744,2910328745&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',tag: 8, opacity: 1, id: 0, style: {transform: 'translate3d(-8vw, 0,0)', opacity: 1}},
        { img: 'https://img1.baidu.com/it/u=1706103831,1363884341&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', tag: 16, opacity: 1, id: 1, style: {transform: 'translate3d(-16vw, 0,0)', opacity: 1}},
        { img: 'https://img1.baidu.com/it/u=2550960533,4221620859&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400', tag: 24, opacity: 1,id: 2, style: {transform: 'translate3d(-24vw, 0,0)', opacity: 1}},
        { img: 'https://img0.baidu.com/it/u=524087823,1067912345&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400', tag: 32, opacity: 1, id: 3, style: {transform: 'translate3d(-32vw, 0,0)', opacity: 1}},
        { img: 'https://img0.baidu.com/it/u=977404886,4043597899&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300', tag: 40, opacity: 1, id: 4, style: {transform: 'translate3d(-40vw, 0,0)', opacity: 1}},
        { img: 'https://img2.baidu.com/it/u=1095533972,3819477962&fm=253&fmt=auto&app=138&f=JPEG?w=320&h=320', tag: 48, opacity: 0, id: 5, style: {transform: 'translate3d(-48vw, 0,0)', opacity: 0}},
      ],

    }
  },
  created() {
  },
  mounted() {

  },
  beforeDestroy() {
  },
  methods: {
    playAni() {
      let obj = { img: 'https://img1.baidu.com/it/u=3343182881,800006273&fm=253&fmt=auto&app=138&f=JPEG?w=240&h=240', tag: -8, opacity: 0, id: new Date().getTime(), style: {transform: 'translate3d(0, 0,0)', opacity: 0}}
      this.avatarList.unshift(obj)
      this.avatarList[1].opacity = 1
      setTimeout(() => {
        this.avatarList.map(item => {
          item.tag += 8
          if (item.tag == 48) {
            item.opacity = 0
          }
        })
        setTimeout(() => {
          this.avatarList.pop()
        },1000)
      }, 200)
    },
    start() {
      setInterval(() => {
        this.playAni()
      }, 1500)
    }
  }
}
</script>

<style scoped lang="less">
.page-container {
    min-height: 100vh;
    background-color: darkred;
    overflow: hidden;
    .avatar-wrap {
      margin: 400px auto;
      width: 400px;
      height: 80px;
      position: relative;
      .avatar {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0;
        right: 0;
        transition: all linear .2s;
        //&:nth-child(2) {
        //  right: 60px;
        //}
        //&:nth-child(3) {
        //  right: 120px;
        //}
        //&:nth-child(4) {
        //  right: 180px;
        //}
        //&:nth-child(5) {
        //  right: 240px;
        //}

        .avatar-img {
          display: block;
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }
      }
    }

    .btn {
      margin: 100px auto;
      width: 100px;
      height: 100px;
      background-color: red;
    }
}
</style>
